<template>
  <div class="addApply">
    <p class="p_tip">基本信息</p>
    <el-form :disabled="isView" :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="16">
          <el-form-item label="通知名称：" prop="notificationName">
            <el-input v-model="form.notificationName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检测时间：" prop="detectionTime">
            <el-date-picker
              size="small"
              v-model="form.detectionTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="通知内容：" prop="noticeContent">
            <el-input type="textarea" rows="4" v-model="form.noticeContent" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <p class="p_tip">检测人员范围</p>
    <div class="fw_Box">
      <div class="checkedBox">
        <span v-show="isView" v-for="(item,index) in list" :key="index"
              :class="['btn',{selected:index+1===form.detectionType}]">{{item}}</span>
        <span v-show="!isView" v-for="(item,index) in list" :key="index" @click="countAuth(index)"
              :class="['btn',{selected:index+1===form.detectionType}]">{{item}}</span>
      </div>
      <div class="community" v-if="form.detectionType===2">
        <span v-show="isView" class="btn selected" v-for="(item,index) in checkedCommunity" :key="index"
        >{{item.communityName}}</span>
        <span v-show="!isView" :class="['btn',{selected:item.checked}]" v-for="(item,index) in community" :key="index"
              @click="handleChecked(item)">{{item.name}}</span>
        <div style="clear: both"></div>
      </div>
      <div class="peoList" v-if="form.detectionType===3">
        <el-row v-if="!isView" :gutter="10" style="text-align: right;margin-bottom: 10px">
          <el-button type="primary" @click="batchRemove">删除</el-button>
          <el-button type="primary" @click="downloadExl">模版下载</el-button>
          <el-button type="primary" @click="dialogVisible = true">导入</el-button>
          <el-button type="primary" @click="checkPeo">选择人员</el-button>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          border
          header-cell-class-name="header-class"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            prop="address"
            label="居住地址"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="phoneNumber"
            label="手机号码"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="80">
            <template slot-scope="scope">
              <el-button
                v-show="!isView"
                type="text"
                size="small"
                @click="remove(scope.row)">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-row style="text-align: center;line-height: 80px">
      <el-button size="small" type="info" @click="$router.go(-1)">返 回</el-button>
      <el-button v-if="!isView" size="small" type="primary" @click="submit('ruleForm')">提 交</el-button>
    </el-row>
    <!--    选择人员-->
    <addPeople :visible.sync="openDialog" @checkedSelection="checkedSelection"></addPeople>
    <!--    导入-->
    <el-dialog title="导入管理" :visible.sync="dialogVisible" width="400px">
      <el-upload
        ref="upload"
        :limit="1"
        drag
        :on-change="handleChange"
        accept=".xls,xlsx"
        class="upload"
        :auto-upload="false"
        :file-list="file"
        :on-remove="handleRemove"
        action="#"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import addPeople from './component/addPeople.vue';
  import {exportExcel} from '../../utils/util'

  export default {
    name: "addApply",
    components: {
      addPeople,
    },
    data() {
      return {
        form: {notificationName: '', detectionTime: '', noticeContent: '', detectionType: 1},
        list: ["全部小区", "指定检测小区", "指定检测人员"],
        community: [],
        checkedCommunity: [],
        tableData: [],
        multipleSelection: [],
        openDialog: false,
        rules: {
          notificationName: [
            {required: true, message: '请输入通知名称', trigger: 'change'},
          ],
          detectionTime: [
            {required: true, message: '请选择检测时间', trigger: 'change'},
          ],
          noticeContent: [
            {required: true, message: '请输入通知内容', trigger: 'change'},
          ],
        },
        dialogVisible: false,
        file: [],
        isView: false,
      }
    },
    methods: {
      countAuth(index) {
        this.form.detectionType = index + 1
      },
      //查询所有小区
      getSubBuildList() {
        let params = {
          level: 1,
        }
        this.$ajax.peng.getSubBuildList(params).then(data => {
          this.community = data.data
          this.community.forEach((v, index) => {
            this.checkedCommunity.forEach((i) => {
              if (v.id == i.communityId) {
                this.$set(this.community[index], 'checked', true);
              }
            })
          })
        })
      },
      handleChecked(item) {
        if (item.checked) {
          this.$set(item, 'checked', false);
        } else {
          this.$set(item, 'checked', true);
        }
        this.checkedCommunity = this.community.filter((item) => {
          return item.checked
        })
        console.log(this.checkedCommunity)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      checkPeo() {
        this.openDialog = true
      },
      // 添加人员
      checkedSelection(data) {
        this.tableData.push(...data)
        let obj = {};
        this.tableData = this.tableData.reduce(function (item, next) {
          obj[next.id] ? '' : obj[next.id] = true && item.push(next);
          return item;
        }, []);
      },
      //删除单个人员
      remove(row) {
        this.tableData = this.tableData.filter((item) => {
          return item.id != row.id
        });
      },
      // 批量删除
      batchRemove() {
        let arr = []
        this.multipleSelection.forEach((v) => {
          arr.push(v.id)
        })
        console.log(arr)
        arr.map((v) => {
          this.tableData = this.tableData.filter((item) => {
            return item.id != v
          });
        })
      },
      //模版下载
      downloadExl() {
        this.$ajax.peng.downloadExl().then(data => {
          exportExcel(data, '居民导入模版.xls')
        })
      },
      //选择文件
      handleChange(file, fileList) {
        this.file = fileList;
      },

      handleRemove(file, fileList) {
        this.file = fileList
      },
      // 导入
      submitFileForm() {
        if (this.file.length == 0) {
          this.$message.warning('请选择文件')
          return false
        }
        var formData = new FormData();
        formData.append("file", this.file[0].raw);
        this.$ajax.peng.exportExl(formData).then((data) => {
          this.tableData.push(...data.data)
          this.dialogVisible = false;
          this.file = [];
        });

      },
      //提交申请
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params
            if (this.form.detectionType == 1) {
              params = {
                ...this.form,
                ids: []
              }
            } else if (this.form.detectionType == 2) {
              let ids = []
              this.checkedCommunity.forEach((v) => {
                ids.push(v.id)
              })
              params = {
                ...this.form,
                ids,
              }
            } else if (this.form.detectionType == 3) {
              let ids = []
              this.tableData.forEach((v) => {
                ids.push(v.id)
              })
              params = {
                ...this.form,
                ids,
              }
            }
            this.$ajax.peng.queryNucleinDetectionApplyRecord1(params).then(data => {
              this.$message.success('提交成功')
              this.$router.push({path: '/apply'})
            })
          }
        });

      }
    },
    mounted() {
      if (this.$route.query.id) {
        // 查看
        this.isView = true
        let params = {
          detectionId: this.$route.query.id,
        }
        this.$ajax.peng.LookNucleinDetectionApplyRecord(params).then(data => {
          let result = data.data
          //form: {notificationName: '', detectionTime: '', noticeContent: '', detectionType: 1},
          this.form.notificationName = result.notificationName
          this.form.detectionTime = result.detectionTime
          this.form.noticeContent = result.noticeContent
          this.form.detectionType = result.detectionType
          this.checkedCommunity = result.communityList
          this.tableData = result.inhabitInfoVos
          this.getSubBuildList()
        })
      } else if (this.$route.query.data) {
        //安排2次核酸
        let data = JSON.parse(this.$route.query.data)
        this.tableData.push(...data)
        this.form.detectionType = 3
        this.getSubBuildList()
      } else {
        this.getSubBuildList()
      }
    },
  }
</script>

<style lang="scss">
  .addApply {
    .fw_Box {
      width: 100%;

      .checkedBox {
        height: 60px;
      }

      .btn {
        display: block;
        width: 112px;
        height: 40px;
        color: rgb(26, 188, 156);
        border: 1px solid rgb(26, 188, 156);
        float: left;
        margin-right: 20px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        margin-bottom: 10px;
      }

      .selected {
        background-color: rgb(26, 188, 156);
        color: #fff;
      }

      .el-button--primary {
        background-color: rgb(26, 188, 156);
        border-color: rgb(26, 188, 156)
      }

    }
  }

</style>
